<template>
  <view class="e-popup">
    <u-popup
      :show="showPopup"
      mode="center"
      :safeAreaInsetBottom="false"
      round="10"
      @close="handleClosePopup(true)"
    >
      <view class="popup-content">
        <view class="popup-title">{{title}}</view>
        <slot name="content"></slot>
        <view class="button-group">
          <u-button text="取消" color="#E5E5E5" @click="handleClosePopup(true)"></u-button>
          <u-button text="确认" color="#1F66FF" @click="handleConfirmBtn"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "e-popup",
  data() {
    return {
      showPopup: false,
      title: ""
    }
  },
  methods: {
    handleShowPopup(title = "", show = true) {
      this.showPopup = show;
      this.title = title;
    },
    // 取消弹窗
    handleClosePopup(isClose = false) {
      if(isClose){
        this.$emit("close");
        return;
      }
      this.showPopup = false;
    },
    // 确认按钮
    handleConfirmBtn(){
      this.$emit("confirm");
    }
  },
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style scoped lang="scss">
  .e-popup{
    .popup-content{
      width: 630rpx;
      padding: 40rpx 40rpx 30rpx;
      .popup-title{
        text-align: center;
        font-size: 30rpx;
        font-family: 'pingfang-heavy';
        margin-bottom: 30rpx;
      }
      .button-group{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 30rpx;
        /deep/ .u-button:first-child{
          color: #333 !important;
          margin-right: 22rpx;
        }
        /deep/ .u-button{
          border-radius: 20rpx;
        }
      }
    }
  }
</style>